<template>
  <cl-container>
    <center>
      <h1>CopiaLibri库存记录</h1>
      <el-button @click="export2Excel(booklst, 'stock')">
        导出为Excel文件
      </el-button>
      <!-- <el-button @click="export2CSV(booklst, 'stock')">
        导出为CSV文件
      </el-button> -->
      <!-- <el-button icon="el-icon-plus" circle></el-button> -->
    </center>
    <el-table :data="booklst">
      <el-table-column
        label="书名"
        prop="name"
        sortable>
      </el-table-column>

      <el-table-column
        label="作者"
        prop="author"
        sortable
        sort-by="author"
        :filters="authorFilter"
        :filter-method="authorFilterMethod">
        <template slot-scope="scope">
          <cl-editable :value="scope.row.author" @change="handleAuthorChange" @toggle="handleToggle('author', scope)"></cl-editable>
        </template>
      </el-table-column>

      <el-table-column
        label="出版社"
        prop="house"
        sortable
        sort-by="house"
        :filters="houseFilter"
        :filter-method="houseFilterMethod">
        <template slot-scope="scope">
          <cl-editable :value="scope.row.house" @change="handleHouseChange" @toggle="handleToggle('house', scope)"></cl-editable>
        </template>
      </el-table-column>

      <el-table-column label="原价" prop="price" :formatter="priceFormat" sortable></el-table-column>

      <el-table-column
        label="售价"
        sortable
        sort-by="sellPrice">
        <template slot-scope="scope">
          <cl-editable :value="scope.row.sellPrice | price" @change="handleSellPriceChange" @toggle="handleToggle('sellPrice', scope)"></cl-editable>
        </template>
      </el-table-column>

      <el-table-column
        label="库存"
        sortable
        sort-by="stock">
        <template slot-scope="scope">
          <cl-editable :value="scope.row.stock" @change="handleStockChange" @toggle="handleToggle('stock', scope)"></cl-editable>
        </template>
      </el-table-column>
    </el-table>

    <cl-book-form></cl-book-form>

  </cl-container>
</template>

<script>
import ClContainer from '@/components/components/ClContainer'
import ClEditable from '@/components/Admin/components/ClEditable'
import ClBookForm from '@/components/Admin/components/ClBookForm'
import { export2Excel, export2CSV } from '@/utils/Excel'
import { AdminGetStock, AdminPostUpdateBook } from '@/utils/request'
import { int2price } from '@/utils/format'

export default {
  components: {
    'cl-container': ClContainer,
    'cl-book-form': ClBookForm,
    'cl-editable': ClEditable
  },
  data () {
    return {
      booklst: [],
      cache: []
    }
  },
  computed: {
    authorFilter () {
      var s = new Set()
      for (let item of this.booklst) {
        s.add(item.author)
      }
      var ret = []
      for (let item of s) {
        ret.push({
          text: item,
          value: item
        })
      }
      return ret
    },
    houseFilter () {
      var s = new Set()
      for (let item of this.booklst) {
        s.add(item.house)
      }
      var ret = []
      for (let item of s) {
        ret.push({
          text: item,
          value: item
        })
      }
      return ret
    }
  },
  filters: {
    price (value) {
      return int2price(value, true)
    }
  },
  methods: {
    priceFormat (row, column, cellValue) {
      return int2price(cellValue, true)
    },
    handleToggle (attr, scope) {
      const form = {
        'attr': attr,
        'value': String(this.cache[attr])
      }
      AdminPostUpdateBook(scope.row.isbn, form).then(rsp => {
        console.log(rsp.data)
        const { success } = rsp.data
        if (success) {
          this.$notify({
            title: '数据更新成功',
            message: `${form.attr} = ${form.value}`
          })
        }
      })
    },
    handleAuthorChange (val, oldVal) {
      this.cache['author'] = val
    },
    handleHouseChange (val, oldVal) {
      this.cache['house'] = val
    },
    handleSellPriceChange (val, oldVal) {
      this.cache['sellPrice'] = val
    },
    handleStockChange (val, oldVal) {
      this.cache['stock'] = val
    },
    authorFilterMethod (value, row, column) {
      return value === row.author
    },
    houseFilterMethod (value, row, column) {
      return value === row.house
    },
    export2Excel,
    export2CSV
  },
  created () {
    AdminGetStock().then(rsp => {
      const lst = rsp.data
      this.booklst = lst
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
